<template>
  <div>
    <v-bill-card-base v-for="bill in bills.body" :key="bill.no" :bill="bill">
      <template slot-scope="{bill}" slot="opera">
        <el-button type="text" v-if="bill.orderStatus === 0 || bill.orderStatus === 2" @click="revocationOrder(`${bill.orderNo}`)">撤回</el-button>
        <el-button type="text" @click="$router.push(`./detail/${bill.id}`)">详情</el-button>
        <el-button type="text" v-if="bill.orderStatus === 2" @click="endorseBill(`${bill.id}`)">背书</el-button>
      </template>
      <template slot-scope="{bill}" slot="tips">

        {{$utils.toTypeFormat(bill.orderStatus,$dict.orderTypes)}}
      </template>
      <div slot-scope="{bill}" slot="expand" class="expand">
        <div class="item">
          <div class="label">报价时间</div>
          <div class="value">{{bill.quoteCreateTime}}</div>
        </div>
        <div class="item">
          <div class="label">报价机构序列号</div>
          <div class="value">{{bill.quotationNumber}}</div>
        </div>

        <div class="item">
          <div class="label">贴现率</div>
          <div class="value">{{bill.quoteOptimalIntentRate}}</div>
        </div>
        <div class="item">
          <div class="label">贴息额</div>
          <div class="value">{{bill.quoteDiscountAmount}}</div>
        </div>
        <div class="item">
          <div class="label">转让额</div>
          <div class="value">{{bill.transferAmount}}</div>
        </div>
        <div class="item">
         <el-button type="primary" v-if="bill.orderStatus === 2" @click="showEndorsed(bill)">背书</el-button>
        </div>
      </div>
    </v-bill-card-base>
    <div class="operation pageation">
        <b></b>
        <el-pagination
                @current-change="change"
                :current-page="bills.footer.currentPage"
                layout="total, prev, pager, next"
                :page-size="10"
                :total="bills.footer.total">
        </el-pagination>
    </div>
  </div>
</template>
<script lang="ts">
  import {Vue,Component,Emit} from 'vue-property-decorator'

  import vBillCardBase from '@/components/bill-card-base/index.vue'
// todo hover
  @Component({
    components: {
      vBillCardBase
    },
    props: ['bills']
  })
  export default class BillCardOrder extends Vue {
    async showEndorsed ({ id }) {
      let res: AjaxResponse = await this.$axios.post(`g/gateway/txn/endorsed/${id}`)
      this.$utils.tips(res)
    }
    @Emit()
    change (currentPage) {
    }
    // 撤回订单
    revocationOrder (orderNo) {
      this.$emit('revocationOrder',orderNo)
    }
    // 背书
    endorseBill (billId) {
      this.$emit('endorseBill',billId)
    }
  }
</script>
<style lang="less" scoped>
  .expand {
    height: 84px;
    display: flex;
    flex-direction: row;
    background: #F5F7FA;
    line-height: 84px;
    .item {
      flex: 1;
      div {
        line-height: 42px;
        font-size: 16px;
        text-align: center;
      }
      .label {
        color: #999;
      }
    }
  }
</style>
